<template>
  <!-- 修改密码页面 -->
  <div class="">
    <button @click="pop_message_big_Box($event)" class="click_btn">详情</button>
    <div id="pop_message_Layer"></div>

    <div class="Pop_up_box" id="pop_message_Box">
      <div class="pop_left">
        <div class="theme">活动详情</div>
        <div class="pop_top_back">
          <button class=" btn btn-default" @click="closeBox()">返回</button>
        </div>
        <hr class="pop_message_hr">
        <div class="message_change_center_top_big_box">
          <div class="message_change_center_top_box">
            <span class="message_change_center_top">活动名称：</span>
            <span class="message_change_center_top" id="pop_top_active_name">{{ active_name }}</span>
          </div>
          <div class="message_change_center_top_box">
            <span class="message_change_center_top">活动日期：</span>
            <span class="message_change_center_top" id="pop_top_activity_date">{{ activity_date }}</span>
          </div>
          <div class="message_change_center_top_box">
            <span class="message_change_center_top">活动状态：</span>
            <span class="message_change_center_top" id="pop_top_active_state">{{ active_state }}</span>
          </div>
        </div>
        <div class="active_tip_box">
          <span class="active_tip_message">参与人员</span>
          <span class="green_piece"></span>
          <span class="active_tip_message">已投票人员</span>
          <span class="red_piece"></span>
          <span class="active_tip_message">未投票人员</span>
          <div class="active_bottom_tip">
            <span>已被选中的参与投票人员</span>

            <!-- <el-pagination :page-size="1" :pager-count="3" layout="prev, pager, next" :total="total"
              @current-change="details_pagechange" /> -->
            <!-- <el-pagination :page-size="1" :pager-count="5" layout="prev, pager, next" :total="total"              @current-change="details_pagechange" /> -->
            <span class="active_bottom_tip_right">共{{ active_person_number }}人</span>
          </div>
        </div>
        <div style="clear: both;"></div>

        <div class="box_contents">
          <!-- <span v-for="item in details_displayactive" :key="item" style="width: 60px;     height: 50px;">{{ item }}</span> -->
          <span v-for="item in active_person" :key="item" style="width: 60px;     height: 50px;">{{ item
            }}</span>


        </div>

        <div class="votting_results">
          <span style="margin-right: 20px;">投票结果</span>
          <span>共计
            <span style="color: #00a91c;">{{ already_ballots }}</span>/{{ non_bollots }}人已投票</span>
        </div>


        <div style="clear: both;"></div>
        <!-- <div style="clear: both;border-bottom: 0.1px solid;margin-top: 20px;"></div> -->
        <div class="already_ballots_box">
          <div>
            <div class="already_ballots_people">
              <!-- <span v-for="item in A_details_displayactive" :key="item" class="already_ballots_people_name">{{ item }}</span> -->
              <span v-for="item in A_already_ballots_people" :key="item" class="already_ballots_people_name">{{ item
                }}</span>

              <!-- <el-pagination :page-size="1" size="small" :pager-count="5" layout="prev, pager, next" :total="total"              class="already_ballots_people_changepage" @current-change="A_details_pagechange" /> -->
            </div>
            <span class="">{{ A_option_name }} : {{ A_option_number }} 票</span>
          </div>
          <div>
            <div class="already_ballots_people">
              <span v-for="item in B_already_ballots_people" :key="item" class="already_ballots_people_name">{{ item
                }}</span>
              <!-- <el-pagination :page-size="1" size="small" :pager-count="5" layout="prev, pager, next" :total="total"              class="already_ballots_people_changepage" @current-change="B_details_pagechange" /> -->
            </div>
            <span class="">{{ B_option_name }} : {{ B_option_number }} 票</span>
          </div>
          <div>
            <div class="already_ballots_people">
              <span v-for="item in C_already_ballots_people" :key="item" class="already_ballots_people_name">{{ item
                }}</span>
              <!-- <el-pagination :page-size="1" size="small" :pager-count="5" layout="prev, pager, next" :total="total"              class="already_ballots_people_changepage" @current-change="C_details_pagechange" /> -->
            </div>
            <span class="">{{ C_option_name }} : {{ C_option_number }} 票</span>
          </div>
          <div>
            <div class="already_ballots_people">
              <span v-for="item in D_already_ballots_people" :key="item" class="already_ballots_people_name">{{ item
                }}</span>
              <!-- <el-pagination :page-size="1" size="small" :pager-count="5" layout="prev, pager, next" :total="total"              class="already_ballots_people_changepage" @current-change="D_details_pagechange" /> -->
            </div>
            <span class="">{{ D_option_name }} : {{ D_option_number }} 票</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { encryption, decrypt } from "@/utils";
import api from "@/api";
import { event } from "jquery";
export default {
  name: "PopAdmin",
  props: ['details_choose',],
  data() {
    return {
      active_name: '还未选中',
      activity_date: '2024.11.17',
      active_state: '进行',

      active_person: ['lan1', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8', 'lan9', '陆长寻', '张大王', '李大城', 'lan', '陆长寻', '张大王', '李大城', 'lan', '陆长寻', '张大王', '李大城1', 'lan2', '陆长寻3', '张大王4', '李大城5', 'lan6', '陆长寻7', 'lan8', '陆长寻9', '张大王', '李大城', 'lan', '陆长寻', '张大王', '李大城', 'lan', '张大王', '李大城', 'lan', '陆长寻1', '张大王2', '李大城3', '陆长寻4', '张大王5', '李大城6', 'lan7', '陆长寻8', 'lan9', '陆长寻', '张大王', '李大城', 'lan', '陆长寻', '张大王', '李大城', 'lan', '张大王', '李大城', '陆长寻', '张大王1', '李大城2', 'lan3', '陆长寻4', '张大王5', '李大城6', 'lan', '陆长寻1', '张大王2', '李大城3', '陆长寻4', '张大王5', '李大城6', 'lan7', '陆长寻8', 'lan9', '陆长寻', '张大王', '李大城', 'lan', '陆长寻', '张大王', '李大城', 'lan', '张大王', '李大城', '陆长寻', '张大王1', '李大城2', 'lan3', '陆长寻4', '张大王5', '李大城6'],
      // active_person: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16'],
      active_person_number: 69,
      already_ballots: 22,
      non_bollots: 47,

      total: 1, //默认总页数
      page: 1, //默认页数

      details_M: 0, //当前显示条例的开头
      details_N: 64, // 你想显示数量的结尾  显示数量=尾-头
      newM: 0, //临时存储M
      newtotal: 0, //临时存储total

      A_M: 0,//A选项的跳页
      A_N: 12,
      A_total: 0,
      A_page: 1,
      A_total: 1,
      A_already_ballots_people: ['lan1', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8', 'lan9', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8'],
      A_option_name: 'A',
      A_option_number: 16,

      B_M: 0,//B选项的跳页
      B_N: 12,
      B_total: 0,
      B_page: 1,
      B_total: 1,
      B_already_ballots_people: ['lan1', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8', 'lan9', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8', 'lan9'],
      B_option_name: 'B',
      B_option_number: 16,

      C_M: 0,//C选项的跳页
      C_N: 12,
      C_total: 0,
      C_page: 1,
      C_total: 1,
      C_already_ballots_people: ['lan1', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8', 'lan9', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8', 'lan9'],
      C_option_name: 'C',
      C_option_number: 16,

      D_M: 0,//D选项的跳页
      D_N: 12,
      D_total: 0,
      D_page: 1,
      D_total: 1,
      D_already_ballots_people: ['lan1', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8', 'lan9', '陆长寻2', '张大王3', '李大城4', 'lan5', '陆长寻6', '张大王7', '李大城8', 'lan9'],
      D_option_name: 'D',
      D_option_number: 16,

    }
  },


  created() {
    let newtotal = this.active_person.length / (this.details_N - this.details_M);
    this.total = newtotal; //更新总页数
    // console.log(this.active_person.length);
    // console.log(this.details_M);
    let A_newtotal = this.A_already_ballots_people.length / (this.A_N - this.A_M);
    this.A_total = A_newtotal; //更新总页数
    let B_newtotal = this.B_already_ballots_people.length / (this.B_N - this.B_M);
    this.A_total = B_newtotal; //更新总页数
    let C_newtotal = this.C_already_ballots_people.length / (this.C_N - this.C_M);
    this.A_total = C_newtotal; //更新总页数
    let D_newtotal = this.C_already_ballots_people.length / (this.D_N - this.D_M);
    this.A_total = D_newtotal; //更新总页数


  },
  // computed: {
  //   details_displayactive() {
  //     // 通过计算属性控制 显示条例个数
  //     return this.active_person.slice(this.details_M, this.details_N);
  //   },
  //   A_details_displayactive() {
  //     return this.A_already_ballots_people.slice(this.A_M, this.A_N);
  //   },
  //   B_details_displayactive() {
  //     return this.B_already_ballots_people.slice(this.B_M, this.B_N);
  //   },
  //   C_details_displayactive() {
  //     return this.C_already_ballots_people.slice(this.C_M, this.C_N);
  //   },
  //   D_details_displayactive() {
  //     return this.D_already_ballots_people.slice(this.D_M, this.D_N);
  //   },
  // },
  setup(props, context) {
    /*点击弹出按钮*/
    function pop_message_big_Box(data) {

      let it_button = data.target
      // it_button.disabled=true //按钮不可点击
      // console.log(it_button);
      let details_button = data.target.parentElement.parentElement
      let details_button_id = details_button.id.substring(11) //获取当前点击的id数
      console.log(details_button_id); //当前点击的按键id
      this.details_choose_id = details_button_id

      // console.log(props.details_choose[details_button_id-1].activity_name); //打印当前的活动名称
      // console.log(details_button); //当前点击的按钮
      this.active_name = props.details_choose[details_button_id - 1].activity_name //更新活动名称 
      // console.log(this.active_name);
      document.getElementById("pop_top_active_name").innerHTML = this.active_name// 将活动名称赋值
      this.activity_date = props.details_choose[details_button_id - 1].activity_date //更新时间名称 
      document.getElementById("pop_top_activity_date").innerHTML = this.activity_date// 将活动时间赋值
      this.active_state = props.details_choose[details_button_id - 1].active_state //更新活动状态
      document.getElementById("pop_top_active_state").innerHTML = this.active_state// 将活动状态赋值



      let pop_message_Box = document.getElementById("pop_message_Box");
      let pop_message_Layer = document.getElementById("pop_message_Layer");
      pop_message_Box.style.display = "block";
      pop_message_Layer.style.display = "block";
      //本质上就是 将页面效果设置为可见
    }
    /*点击关闭按钮*/
    function closeBox() {
      let pop_message_Box = document.getElementById("pop_message_Box");
      let pop_message_Layer = document.getElementById("pop_message_Layer");
      pop_message_Box.style.display = "none";
      pop_message_Layer.style.display = "none";
      //本质效果就是 将页面效果隐藏
    }
    //发送数据给后端 进行添加管理员
    function AmendPsd() {
      // let old_message_psd = document.getElementById("old_message_psd").value;
      // let new_message_psd = document.getElementById("new_message_psd").value;
      // // var message_verifypsd = document.getElementById("message_verifypsd").value;
      // let message_verifypsd = document.getElementById("message_verifypsd").value;
      // console.log(new_message_psd, message_verifypsd)
      // var mydata = {
      //   oldpassword: old_message_psd,
      //   newpassword: new_message_psd,
      //   confirmPassword: message_verifypsd,
      // };
      // if (
      //   old_message_psd == "" ||
      //   new_message_psd == "" ||
      //   message_verifypsd == ""
      // ) {
      //   alert("请填入对应信息，请勿为空！");
      // }
      // else if (new_message_psd != message_verifypsd) {
      //   alert("两次密码不相同，请重试！");
      // }
      // else {

      //   old_message_psd = encryption(document.getElementById("old_message_psd").value);
      //   new_message_psd = encryption(document.getElementById("new_message_psd").value);//密码加密
      //   message_verifypsd = encryption(document.getElementById("message_verifypsd").value);//密码加密
      //   var mydata = new FormData();
      //   mydata.append("oldPassword", old_message_psd)
      //   mydata.append("newPassword", new_message_psd);
      //   mydata.append("confirmPassword", message_verifypsd);
      //   api
      //     .amendPsd(mydata)
      //     .then((res) => {
      //       if (res.data.status == 200) {
      //         alert("修改成功");
      //         window.location.href = "/AdminLogin";
      //       } else {
      //         alert(res.data.msg);
      //       }
      //     })
      //     .catch((res) => {
      //       console.log(res);
      //       alert("数据问题，请咨询管理员！");
      //     });
      //   closeBox();
      // }
      closeBox();
    }
    return {
      pop_message_big_Box,
      closeBox,
      AmendPsd,
    };

  },
  methods: {
    // 计算将要显示的人员
    details_pagechange(data) {
      // console.log('hello',data);
      console.log(this.details_M, this.details_N);
      // data为点击转跳的页码
      if (data > this.page) {
        //如果转跳页面大于当前页数
        console.log("往后");
        let a = this.details_M;
        let shownum = this.details_N - a; //一页展示的个数
        console.log(shownum);

        this.details_M += (data - this.page) * shownum; //将当前的页面转为转跳的位置
        this.details_N += (data - this.page) * shownum;
        console.log(this.details_M, this.details_N);
        this.page = data;
        console.log('当前页' + this.page);
      } else {
        console.log('往前');
        let a = this.details_M;
        let shownum = this.details_N - a; //一页展示的个数
        console.log(shownum);

        this.details_M -= (this.page - data) * shownum; //将当前的页面转为转跳的位置
        this.details_N -= (this.page - data) * shownum;
        console.log(this.details_M, this.details_N);
        this.page = data;
        console.log('当前页' + this.page);
      }
    },
    A_details_pagechange(data) {
      // console.log('hello',data);
      // console.log(this.details_M,this.details_N);
      // data为点击转跳的页码
      if (data > this.A_page) {
        //如果转跳页面大于当前页数
        // console.log("往后");
        let a = this.A_M;
        let shownum = this.A_N - a; //一页展示的个数
        // console.log(shownum);

        this.A_M += (data - this.A_page) * shownum; //将当前的页面转为转跳的位置
        this.A_N += (data - this.A_page) * shownum;
        // console.log(this.details_M, this.details_N);
        this.A_page = data;
        // console.log('当前页'+this.page);
      } else {
        // console.log('往前');
        let a = this.A_M;
        let shownum = this.A_N - a; //一页展示的个数
        // console.log(shownum);

        this.A_M -= (this.A_page - data) * shownum; //将当前的页面转为转跳的位置
        this.A_N -= (this.A_page - data) * shownum;
        // console.log(this.details_M, this.details_N);
        this.A_page = data;
        // console.log('当前页'+this.page);
      }
    },

    B_details_pagechange(data) {
      // console.log('hello',data);
      // console.log(this.details_M,this.details_N);
      // data为点击转跳的页码
      if (data > this.B_page) {
        //如果转跳页面大于当前页数
        // console.log("往后");
        let a = this.B_M;
        let shownum = this.B_N - a; //一页展示的个数
        // console.log(shownum);

        this.B_M += (data - this.B_page) * shownum; //将当前的页面转为转跳的位置
        this.B_N += (data - this.B_page) * shownum;
        // console.log(this.details_M, this.details_N);
        this.B_page = data;
        // console.log('当前页'+this.page);
      } else {
        // console.log('往前');
        let a = this.B_M;
        let shownum = this.B_N - a; //一页展示的个数
        // console.log(shownum);

        this.B_M -= (this.B_page - data) * shownum; //将当前的页面转为转跳的位置
        this.B_N -= (this.B_page - data) * shownum;
        // console.log(this.details_M, this.details_N);
        this.B_page = data;
        // console.log('当前页'+this.page);
      }
    },

    C_details_pagechange(data) {
      // console.log('hello',data);
      // console.log(this.details_M,this.details_N);
      // data为点击转跳的页码
      if (data > this.C_page) {
        //如果转跳页面大于当前页数
        // console.log("往后");
        let a = this.C_M;
        let shownum = this.C_N - a; //一页展示的个数
        // console.log(shownum);

        this.C_M += (data - this.C_page) * shownum; //将当前的页面转为转跳的位置
        this.C_N += (data - this.C_page) * shownum;
        // console.log(this.details_M, this.details_N);
        this.C_page = data;
        // console.log('当前页'+this.page);
      } else {
        // console.log('往前');
        let a = this.C_M;
        let shownum = this.C_N - a; //一页展示的个数
        // console.log(shownum);

        this.C_M -= (this.C_page - data) * shownum; //将当前的页面转为转跳的位置
        this.C_N -= (this.C_page - data) * shownum;
        // console.log(this.details_M, this.details_N);
        this.C_page = data;
        // console.log('当前页'+this.page);
      }
    },

    D_details_pagechange(data) {
      // console.log('hello',data);
      // console.log(this.details_M,this.details_N);
      // data为点击转跳的页码
      if (data > this.D_page) {
        //如果转跳页面大于当前页数
        // console.log("往后");
        let a = this.D_M;
        let shownum = this.D_N - a; //一页展示的个数
        // console.log(shownum);

        this.D_M += (data - this.D_page) * shownum; //将当前的页面转为转跳的位置
        this.D_N += (data - this.D_page) * shownum;
        // console.log(this.details_M, this.details_N);
        this.D_page = data;
        // console.log('当前页'+this.page);
      } else {
        // console.log('往前');
        let a = this.D_M;
        let shownum = this.D_N - a; //一页展示的个数
        // console.log(shownum);

        this.D_M -= (this.D_page - data) * shownum; //将当前的页面转为转跳的位置
        this.D_N -= (this.D_page - data) * shownum;
        // console.log(this.details_M, this.details_N);
        this.D_page = data;
        // console.log('当前页'+this.page);
      }
    },
  },
  watch: {
    active_name(newval, oldval) {
      console.log(newval);

      // let val = JSON.stringify(newval)
      // let a = JSON.parse(val)

      // console.log(a['id']);


      // this.active_name=val.active_name
      // console.log(this.active_name);

    }
  }
};
</script>

<style scoped>
.box {
  z-index: 1;
}

/*背景层 作为阴影部分 遮挡信息*/
.click_btn {
  background: none;
  border: none;
  /* padding: 18px 38%; */
  /* 悬浮鼠标样式 */
  cursor: pointer;
}

#pop_message_Layer {
  /* 设置display 为none 不显示 */
  display: none;
  background-color: #c2c2c2;
  /* position: absolute; */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
  /* 只支持IE6、7、8、9 */
  cursor: auto;
}

/*弹出层  弹出对应的信息*/
/* 2.设置弹出层和背景层的display属性为none;让他们默认隐藏不显示; */
#pop_message_Box {
  /* 设置display 为none  不显示 */
  display: none;
  background-color: #ffffff;
  background-image: "@/assets/vote/beijing.png";
  z-index: 11;
  /* 设置弹出层的显示大小，并且居中显示; */
  width: 60%;
  height: 80%;
  /* position: absolute; */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  cursor: auto;
  border-radius: 10px;

  overflow-y: auto;
  scrollbar-width: thin;
}

#pop_message_Box .close {
  text-align: right;
  margin-right: 5px;
  background-color: #f8f8f8;
}

/*关闭按钮*/
#pop_message_Box .close a {
  text-decoration: none;
  color: #2d2c3b;
}

.Pop_up_box {
  width: 760px;
  height: 100%;
  text-align: center;
  /* width: 950px; */
  overflow: hidden;
}

/* .popleft {
  float: left;
  margin-top: 5.5%;
} */
/* .pop_right {
  float: right;
} */
.theme {
  font-family: FZYTK--GBK1-0;
  font-size: 35px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #669bfb;

  /* margin-bottom: 25px; */
  /* margin-left: 100px; */

  margin-top: 25px;
  /* border-bottom: 1px solid #b5b5b5; */
  height: 60px;
}

.box_contents {
  /* font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #669bfb; */
  font-family: AdobeHeitiStd-Regular;
  display: inline-flex;
  flex-direction: row;
  width: 90%;
  border: solid 1px #d1d1d1;
  flex-wrap: wrap;
  justify-content: space-evenly;

  position: relative;
  padding: 0px 15px 40px 15px;
  height: 250px;
  /* 添加滚动条来查看溢出的内容 */
  overflow: auto;
    scrollbar-width: thin;
}

.myin {
  border: 1px solid #b6b6b6;
  /* border-top: 0;
  border-left: 0;
  border-right: 0; */
  /* 设置outline 轮廓样式 */
  outline: none;
  /* 背景为透明无颜色 是background-color 的默认值 */
  background: transparent;
  /* 设置轮廓的宽度 */
  outline: medium;
  /* width: 200px; */
  font-size: 23px;
  height: 35px;



}

.button {
  display: inline-block;
  width: 171px;
  height: 57px;
  border: solid 1px #78aefe;
  /* margin-left: 170px;
  margin-top: 40px; */
  /* 水平居中 */
  text-align: center;
  /* 设置行高 */
  line-height: 62px;
  cursor: pointer;
}

.pop_btn {
  border: none;
  background: none;
  font-family: AdobeHeitiStd-Regular;
  color: #669bfb;
  font-size: 25px;
  font-weight: normal;
  font-stretch: normal;
  /* 设置字间距 */
  letter-spacing: 0px;

  cursor: pointer;
  position: relative;
  bottom: 5px;
}

/* 消除button 的点击样式 */
button:focus {
  outline: none;
}

.button_box {
  /* margin-left: 30px; */
  margin-top: 30px;
  display: flex;
  margin-right: 50px;
  justify-content: flex-end;
}

.right img {
  height: 500px;
}

.message_change_center_top {
  display: block;
  width: auto;
  width: max-content;
  height: auto;
  margin: 0;
  text-align: center;
  line-height: normal;
  letter-spacing: 1px;
}

.btn-default {
  width: 81px;
  margin-right: 10px;
}

.pop_top_back {
  position: absolute;
  top: 25px;
  right: 30px;
}

.pop_top_back_button {
  background-color: transparent;
  border: solid 1px #a0a0a0;
  width: 72px;
  height: 33px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop_message_hr {
  width: 70%;
  margin-top: 0px;
  margin-bottom: 0px;
}

.message_change_center_top_box {
  display: inline-flex;
}

.message_change_center_top_box:not(:last-child) {
  margin-right: 60px;
}

.message_change_center_top_big_box {
  height: 40px;
}

.green_piece {
  width: 35px;
  height: 16px;
  background-color: #00a91c;
  border-radius: 7px;

  display: inline-block;

  margin: 0px 5px 0px 25px;
}

.red_piece {
  width: 36px;
  height: 16px;
  background-color: #ba2626;
  border-radius: 7px;

  display: inline-block;

  margin: 0px 10px 0px 25px;
}

.active_tip_message {
  position: relative;
  bottom: 2px;
}

.active_tip_box {
  float: left;
  margin-left: 30px;
}

.active_bottom_tip {
  /* position: absolute;
  bottom: 0px;
  width: 100%;
  display: flex;
  justify-content: space-between; */
  display: inline-flex;
  justify-content: space-around;
  width: 300px;
  float: right;

  padding: 0px 30px;
  color: #bcbcbc;
  letter-spacing: 0px;
  font-size: 12px;
}

.active_bottom_tip_right {
  float: right;
}

.votting_results {

  float: left;
  margin-left: 30px;
}

.already_ballots_people {
  border: solid 1px #d1d1d1;
  width: 213px;
  height: 155px;
  line-height: 30px;
  position: relative;
  overflow: auto;
  /* 细条滚轮 */
  scrollbar-width: thin; 

}

.already_ballots_people_changepage {
  display: flex;
  bottom: 0px;
  position: absolute;
  left: 0px;
  right: 0px;
  text-align: center;
  justify-content: center;
}

.already_ballots_people_name {
  display: inline-block;
  color: #00a91c;
  width: 60px;
}

.already_ballots_box {
  display: inline-flex;
  width: 90%;
  justify-content: space-between;
}

.already_ballots_bottom {
  display: block;
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
}

/* 设置整个页面的滚动条 */
.already_ballots_people::-webkit-scrollbar {
  width: 6px;

}
</style>